<template>
  <div>
    <after-project
      :relatedId="relatedId"
      @success="handleChangeStatus"
      @change-status="statusChange"
      ref="afterProject"
    ></after-project>

    <div class="card mt-3" style="min-height: 65vh">
      <div class="card-body">
        <el-tabs v-model="active">
          <el-tab-pane label="贷后登记" name="loan">
            <after-register :related-id="relatedId" ref="afterRegister"></after-register>
          </el-tab-pane>
          <el-tab-pane label="还款跟踪" name="replay">
            <after-repay-editor
              :related-id="relatedId"
              @success="handleRepaySuccess"
            ></after-repay-editor>
          </el-tab-pane>
          <el-tab-pane label="远程监控">
            <p><b>电表查询</b></p>
            <after-ele :related-id="relatedId"></after-ele>
            <p><b>视频查询</b></p>
            <after-video :farm-id="relatedId"></after-video>
            <p><b>其他物联网查询</b></p>
            <after-device :farm-id="relatedId"></after-device>
          </el-tab-pane>
          <el-tab-pane label="贷后评价"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import AfterProject from '@/credit/views/county/index/myTask/AfterProject'
import AfterRegister from '@/credit/views/city/self/after/AfterRegister'
import AfterRepayEditor from '@/credit/views/city/task/AfterRepayEditor'
import AfterEle from '@/credit/views/city/self/after/AfterEle'
import AfterVideo from '@/credit/views/city/self/after/video/VideoList'
import AfterDevice from '@/credit/views/city/self/after/AfterDevice'

export default {
  components: {
    AfterProject,
    AfterRegister,
    AfterRepayEditor,
    AfterEle,
    AfterVideo,
    AfterDevice,
  },
  props: {
    relatedId: {
      type: String,
      default: '',
    },
    farmId: {
      type: String,
      default: '',
    },
    tab: {
      type: String,
      default: 'loan',
    },
  },
  data() {
    return {
      active: 'loan',
    }
  },
  computed: {},
  watch: {
    relatedId: {
      handler: function () {
        this.active = this.tab
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    statusChange() {
      this.$emit('success', true)
    },
    handleChangeStatus() {
      const ref = this.$refs.afterRegister
      if (ref && ref.getData) {
        ref.getData()
      }
    },
    handleRepaySuccess() {
      const ref = this.$refs.afterProject
      if (ref && ref.getData) {
        ref.getData()
      }
    },
  },
}
</script>
<style lang="scss" scoped></style>
